<template>
  <div class="box-left-pie" id="pie">
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts';
import { pieSetOption } from './pieSetOptions'
import { useListStore } from '@/stores/index'
const store = useListStore()



const pieInit = () => {
  //获取前十的本日新增
  const topTen = store.list.localCityNCOVDataList.slice(0, 10)
  const data = topTen.map((v) => {
    return {
      name: v.city,
      value: v.local_confirm_add
    }
  })
  const pieChart = echarts.init(document.querySelector('#pie')!);
  pieChart.setOption(pieSetOption(data))
}
onMounted(async () => {

  await store.getList()
  // console.log('store.list.localCityNCOVDataList', store.list.localCityNCOVDataList)
  pieInit()
})

</script>

<style scoped lang="scss">
.box-left-pie {
  height: 280px;
  margin-top: 5px;
}
</style>
